﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    
    <title>@ViewBag.Title - My ASP.NET MVC Application</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width" />
    
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/jquery", "~/bundles/jqueryui", "~/bundles/jqueryval", "~/bundles/modernizr")
    
    <link id="uiStyle" rel="stylesheet" type="text/css" href="@Url.Content("~/Content/themes/"+@ViewBag.Theme+"/jquery-ui-1.8.23.custom.css")" /> 
    
    <script src="@Url.Content("~/Scripts/xheditor-1.1.14-zh-cn.min.js")" type="text/javascript"></script>
    <style type="text/css">
    #main li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
    .ui-progressbar .ui-progressbar-value { background-image: url(/Content/images/pbar-ani.gif); }
    
    .positionable {

		position: absolute;
		display: block;
		right: 0;
		bottom: 0;
		background-color: #bcd5e6;
		text-align: center;
	}
    </style>
    <script type="text/javascript">
        var activePanel
        var postTab
        var $main

        function ChangeStyle(theme) {

            $("#uiStyle").attr("href", "/Content/themes/" + theme + "/jquery-ui-1.8.23.custom.css");
        }
        $(function () {
            var $tab_title_input = $("#tab_title"),
			$tab_content_input = $("#tab_content");
            var tab_counter = 1;

            $("#tabs").tabs({ selected: 0 });

            //            $("#main ul").on("dblclick", "li", function (event) {
            //                removeTab(this);
            //                event.stopPropagation();
            //            });
            $("#main ul").on("dblclick", "li a", function (event) {
                removeTab(this, "a");
                event.stopPropagation();
            });
            $("#main ul").on("dblclick", "li", function (event) {

                event.stopPropagation();
            });
            $("#main ul").bind("dblclick", function (event) {
                addTab();
            });


            jQuery(document).ready(function () {
                $('.ui-accordion-header').click(function () {
                    $(this).toggleClass("ui-state-active").next().toggle();
                    return false;
                }).next().hide();
            });

            $main = $("#main").tabs({
                tabTemplate: "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close'>关闭</span></li>",
                add: function (event, ui) {
                    var tab_content = $tab_content_input.val() || "Tab " + tab_counter + " content.";
                    $(ui.panel).append("<p>" + tab_content + "</p>");

                    if ($("#main").tabs("length") == 1) {
                        activePanel = ui.panel.id;
                    }
                },
                select: function (event, ui) {
                    activePanel = ui.panel.id;

                },
                show: function (event, ui) {

                    if ($("#" + ui.panel.id + " #ol").length > 0) {
                        if ($("#" + ui.panel.id + " #ol").is(":visible")) {

                            $("#" + ui.panel.id + " #ol").width($("#" + ui.panel.id).width() + 4);
                            $("#" + ui.panel.id + " #ol").height($("#" + ui.panel.id).height() + 2);
                            $("#" + ui.panel.id + " #ol #progressbar").css("margin-top", $("#" + ui.panel.id).height() / 2 - 10);
                            $("#" + ui.panel.id + " #ol").position({
                                of: $("#" + ui.panel.id),
                                my: "left top",
                                at: "left top",
                                offset: "-1 0",
                                collision: "fit fit"
                                //collision: $("#collision_horizontal").val() + " " + $("#collision_vertical").val()
                            });
                        }
                        $("#" + ui.panel.id + " #dialog-confirm").dialog("disable");
                        $dialog = $("#" + ui.panel.id + " #dialog-confirm").dialog({
                            resizable: false,
                            height: 140,
                            autoOpen: false,
                            buttons: {
                                "Delete all items": function () {
                                    $(this).dialog("close");
                                    $("#" + ui.panel.id + " #ol").hide("explode", options, 1000);
                                },
                                Cancel: function () {
                                    $(this).dialog("close");
                                }
                            }
                        });

                        
                        //$dialog.parent().appendTo("#" + panel);

                        $dialog.dialog("open");

                    }


                }
            });
            function removeTab(e, isA) {
                if ($main.tabs("length") <= 1) {
                    return;
                }
                var index;
                if (isA == "a")
                    index = $("li", $main).index($(e).parent().parent());
                else
                    index = $("li", $main).index($(e).parent());
                $main.tabs("remove", index);
            }
            $main.find(".ui-tabs-nav").sortable({ axis: "x" })
            $("#main span.ui-icon-close").live("click", function () {
                removeTab(this);

            });


            //$(".ok").live("click", MenuLink());

            function addTab(title) {
                var tab_title = title || "新建选项卡";
                $main.tabs("add", "#tabs-" + tab_counter, tab_title);
                tab_counter++;

            }

            addTab();

            $("#Button1").bind("click", function () { addTab() });

            $("#Button2").bind("click", function () { });

            var selected = $("#main").tabs("option", "selected");
            function GetActiveId() {
                var selected = $("#main").tabs("option", "selected");

            }
            $("#Button3").bind("click", function () {

                $("#main #" + activePanel).html("");
            });
        });
        function MenuLink(linkurl) {
            //$(activePanel).text("fsafsd");
            overlayer(activePanel)
            $.post(linkurl, { panel: activePanel },
		        function (data, textStatus) {
		            // data 可以是 xmlDoc, jsonObj, html, text, 等等.
		            //this; // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this
		            //$(activePanel).text("fsafsd");

		            //		            if ($("#main #" + data.p).length == 0) {
		            //		                $("#main #" + activePanel).html(data);
		            //		            }
		            //                    else 
		            //                        $("#main #" + data.p).html(data);

		            rePanel = new RegExp('<div id="panel" style="display:none;">(.*?)</div>', "g");
		            if (rePanel.test(data)) {
		                p = RegExp.$1;
		                $("#main #" + p).html(data);
		                jQuery.validator.unobtrusive.parse("#main #"+p);
		            }
		            reTitle = new RegExp('<div id="pageTitle" style="display:none;">(.*?)</div>', "g");
		            if (reTitle.test(data)) {
		                title = RegExp.$1;

		                //alert($("#main").index($("#main #" + p)));
		                $("#main a[href='#"+p+"']").text(title)
		            }
		        });
            //, "json"
		    }
		    function overlayer(panel) {
		        //alert($("#" + panel + " #ol").length())
		        if ($("#" + panel + " #ol").length > 0) {

		            $("#" + panel + " #ol").show();
		            return;
                }
		        $("#" + panel).append('<div id="ol" class="ui-tabs-panel ui-widget-content ui-corner-bottom" style="position: absolute;background-color: #CCC"><div id="progressbar" style="width:300px;text-align:center;margin-left:auto;margin-right:auto;"></div></div>')
		        $("#" + panel + " #ol").width($("#" + panel).width() + 4);
		        $("#" + panel + " #ol").height($("#" + panel).height() + 2);
		        $("#" + panel + " #ol").css("opacity", 0.5);
		        $("#" + panel + " #ol #progressbar").css("margin-top", $("#" + panel).height() / 2-10);
		        $("#" + panel + " #ol").position({
		            of: $("#" + panel),
		            my: "left top",
		            at: "left top",
		            offset: "-2 0",
		            collision: "fit fit"
		            //collision: $("#collision_horizontal").val() + " " + $("#collision_vertical").val()
		        });
		        $("#" + panel + " #progressbar").progressbar({
		            value: 100
		        });

		    }
		    function FormReady(panel) {
		        //$("#"+panel).
		        //alert(panel);
		        overlayer(panel)
		    }
		    var options = {};
		    
		    function FormFinish(panel) {
		        $("#" + panel).append('<div id="dialog-confirm" title="Empty the recycle bin?">' +
	'<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>' +
'</div>');
		        $dialog = $("#" + panel + " #dialog-confirm").dialog({
		            resizable: false,
		            height: 140,
		            autoOpen: false,
		            buttons: {
		                "Delete all items": function () {
		                    $(this).dialog("close");
		                    $("#" + panel + " #ol").hide("explode", options, 1000);
		                },
		                Cancel: function () {
		                    $(this).dialog("close");
		                }
		            }
		        });
		        $dialog.parent().appendTo("#" + panel);

		        $dialog.dialog("open");
		        $dialog.parent().draggable({ containment: "#" + panel, scroll: false });
		        overlayer(panel)
		        jQuery.validator.unobtrusive.parse("#main #" + panel);
		    }    
	</script>
</head>
<body>
    <div class="container">
    <input id="Button1" type="button" value="增加"/>
    <input id="Button2" type="button" value="移除"/>
    <input id="Button3" type="button" value="移除"/>
  <div class="header"><h1>============</h1></div>
  <div class="sidebar1">
    <div id="tabs">
	<ul>
		<li><a href="#menuIndex">功能菜单</a></li>
		<li><a href="#themeGallery">修改样式</a></li>
		<li><a href="#help">帮助</a></li>
	</ul>
        
	<div id="menuIndex">
		<div id="Menu" class="ui-accordion ui-widget ui-helper-reset">
       
	    @foreach (var adminRoot in ViewData.Model)
          {
	    <h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all"><a href="#">@adminRoot.Title</a></h3>
	                    <div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom adminItem">
		<ul>
            @foreach (var adminItem in adminRoot.AdminMenuItemModels)
               { 
            <li><a href="javascript:void(0);" onclick="MenuLink('/@adminItem.Controller/@adminItem.Action')">@adminItem.Title</a></li>            
             } 
        </ul>
	    </div>
             } 
        
        </div>
    </div>
    <div id="themeGallery" class="ui-accordion ui-widget ui-helper-reset">
	<ul>
		<li><a href="javascript:void(0)" onclick="ChangeStyle('ui-lightness')">
			<img src="~/Content/images/theme_90_ui_light.gif" alt="UI Lightness" title="UI Lightness" />
			<span class="themeName">UI lightness</span>
		</a></li>		
		<li><a href="javascript:void(0)" onclick="ChangeStyle('ui-darkness')">
			<img src="~/Content/images/theme_90_ui_dark.png" alt="UI Darkness" title="UI Darkness" />
			<span class="themeName">UI darkness</span>
		</a></li>	
		<li><a href="javascript:void(0)" onclick="ChangeStyle('smoothness')">
			<img src="~/Content/images/theme_90_smoothness.png" alt="Smoothness" title="Smoothness" />
			<span class="themeName">Smoothness</span>
		</a></li>			
				<li><a href="javascript:void(0)" onclick="ChangeStyle('start')">
			<img src="~/Content/images/theme_90_start_menu.png" alt="Start" title="Start" />
			<span class="themeName">Start</span>
		</a></li>
				<li><a href="javascript:void(0)" onclick="ChangeStyle('Redmond')">
			<img src="~/Content/images/theme_90_windoze.png" alt="Redmond" title="Redmond" />
			<span class="themeName">Redmond</span>
		</a></li>
		
				<li><a href="javascript:void(0)" onclick="ChangeStyle('Sunny')">
			<img src="~/Content/images/theme_90_sunny.png" alt="Sunny" title="Sunny" />
			<span class="themeName">Sunny</span>
		</a></li>
		
				<li><a href="javascript:void(0)" onclick="ChangeStyle('Overcast')">
			<img src="~/Content/images/theme_90_overcast.png" alt="Overcast" title="Overcast" />
			<span class="themeName">Overcast</span>		
		</a></li>
		
				<li><a href="javascript:void(0)" onclick="ChangeStyle('Le-Frog')">
			<img src="~/Content/images/theme_90_le_frog.png" alt="Le Frog" title="Le Frog" />
			<span class="themeName">Le Frog</span>
		</a></li>
		
						<li><a href="javascript:void(0)">
			<img src="~/Content/images/theme_90_flick.png" alt="Flick" title="Flick" />
			<span class="themeName">Flick</span>		
		</a></li>
 
	
	
 
		<li><a href="javascript:void(0)">
			<img src="~/Content/images/theme_90_pepper_grinder.png" alt="Pepper Grinder" title="Pepper Grinder" />
			<span class="themeName">Pepper Grinder</span>		
		</a></li>
		
		
				<li><a href="javascript:void(0)">
			<img src="~/Content/images/theme_90_eggplant.png" alt="Eggplant" title="Eggplant" />
			<span class="themeName">Eggplant</span>		
		</a></li>
		
						<li><a href="#">
			<img src="~/Content/images/theme_90_dark_hive.png" alt="Dark Hive" title="Dark Hive" />
			<span class="themeName">Dark Hive</span>
		</a></li>
		
 
		
				
		<li><a href="#">
			<img src="~/Content/images/theme_90_cupertino.png" alt="Cupertino" title="Cupertino" />
			<span class="themeName">Cupertino</span>		
		</a></li>
		
		<li><a href="#">
			<img src="~/Content/images/theme_90_south_street.png" alt="South St" title="South St" />
			<span class="themeName">South Street</span>		
		</a></li>
		<li><a href="#">
			<img src="~/Content/images/theme_90_blitzer.png" alt="Blitzer" title="Blitzer" />
			<span class="themeName">Blitzer</span>
		</a></li>	
		<li><a href="#">
			<img src="~/Content/images/theme_90_humanity.png" alt="Humanity" title="Humanity" />
			<span class="themeName">Humanity</span>
		</a></li>	
		<li><a href="#">
		<img src="~/Content/images/theme_90_hot_sneaks.png" alt="Hot Sneaks" title="Hot Sneaks" />
			<span class="themeName">Hot sneaks</span>
		</a></li>	
		<li><a href="#">
			<img src="~/Content/images/theme_90_excite_bike.png" alt="Excite Bike" title="Excite Bike" />
			<span class="themeName">Excite Bike</span>	
		</a></li>
		<li><a href="#">
			<img src="~/Content/images/theme_90_black_matte.png" alt="Vader" title="Vader" />
			<span class="themeName">Vader</span>	
		</a></li>		
		<li><a href="#">
			<img src="~/Content/images/theme_90_dot_luv.png" alt="Dot Luv" title="Dot Luv" />
			<span class="themeName">Dot Luv</span>	
		</a></li>	
		<li><a href="#">
			<img src="~/Content/images/theme_90_mint_choco.png" alt="Mint Choc" title="Mint Choc" />
			<span class="themeName">Mint Choc</span>
		</a></li>
		<li><a href="#">
			<img src="~/Content/images/theme_90_black_tie.png" alt="Black Tie" title="Black Tie" />
			<span class="themeName">Black Tie</span>
		</a></li>
		<li><a href="#">
			<img src="~/Content/images/theme_90_trontastic.png" alt="Trontastic" title="Trontastic" />
			<span class="themeName">Trontastic</span>	
		</a></li>	
		<li><a href="#">
			<img src="~/Content/images/theme_90_swanky_purse.png" alt="Swanky Purse" title="Swanky Purse" />
			<span class="themeName">Swanky Purse</span>	
		</a></li>
	</ul>
</div>

    <div id="help">tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.tabs-3.</div>
    </div>
    
    <!-- end .sidebar1 --></div>
  <div class="content">
    <div id="main">
    <ul id="mainul"></ul>
    </div>
    <!-- end .content --></div>
  <div class="footer">
  
    <p></p>
    <!-- end .footer --></div>
  <!-- end .container --></div>
</body>
</html>
